import bg from '@/assets/baner.png';
import React, { useEffect, useRef, useState } from 'react';
import TopBar from '../TopBar';
type Props = {
  children?: React.ReactNode;
  content?: React.ReactNode;
  fixed?: boolean;
  style?: React.CSSProperties;
  bgImg?: string;
  className?: string;
};

const Layout: React.FC<Props> = ({ content, children, fixed = false, style, bgImg, className }) => {
  const ref = useRef<any>();
  const [top, setTop] = useState(0);

  useEffect(() => {
    if (ref) {
      setTop(ref.current.offsetHeight);
    }
  }, []);
  return (
    <div
      ref={ref}
      className={className}
      style={{
        backgroundImage: `url(${bgImg || bg})`,
        height: '100%',
        backgroundSize: '100% 100%',
        position: 'relative',
        ...style,
      }}
    >
      <TopBar top={top} fixed={fixed} />
      {content}
      <div className="common layout_child">{children}</div>
    </div>
  );
};

export default Layout;
